<template>
  <el-dialog title="风险评价" :visible.sync="dialogFormVisible" width="800px" class="dialog" :close-on-click-modal="false">
    <!-- 内容 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>现有措施</span>
      </div>
      <!-- 手绘 -->
      <el-form :model="dateForm" ref="dateForm" label-width="80px">
        <!-- 工程技术措施one -->
        <div class="border">
          <span class="content">工程技术措施</span>
          <div 
            v-for="(item, index) in dateForm.domainsOne"
            :key="index"
            :label="index"
            class="form">
            <el-form-item>
              <span class="index">{{index+1}}.</span>
              <el-input v-model="item.value" class="input"></el-input>
            </el-form-item>
              <el-button class="add"  @click.prevent="add(index)" icon="el-icon-circle-plus-outline" circle></el-button>
              <el-button class="delete" :disabled="item.disabled"  @click.prevent="removeDomain(index)" icon="el-icon-remove-outline" circle></el-button>
          </div>
        </div>
        <!-- 管理措施two -->
        <div class="border">
          <span class="content">管理措施</span>
          <div 
            v-for="(item, index) in dateForm.domainsTwo"
            :key="'2'+index"
            :label="index"
            class="form">
            <el-form-item>
              <span class="index">{{index+1}}.</span>
              <el-input v-model="item.value" class="input"></el-input>
            </el-form-item>
              <el-button class="add"  @click.prevent="addTwo(index)" icon="el-icon-circle-plus-outline" circle></el-button>
              <el-button class="delete" :disabled="item.disabled" @click.prevent="removeDomainTwo(index)" icon="el-icon-remove-outline" circle></el-button>
          </div>
        </div>
        <!-- 培训教育措施three -->
        <div class="border">
          <span class="content">培训教育措施</span>
          <div 
            v-for="(item, index) in dateForm.domainsThree"
            :key="'3'+index"
            :label="index"
            class="form">
            <el-form-item>
              <span class="index">{{index+1}}.</span>
              <el-input v-model="item.value" class="input"></el-input>
            </el-form-item>
              <el-button class="add"  @click.prevent="addThree(index)" icon="el-icon-circle-plus-outline" circle></el-button>
              <el-button class="delete" :disabled="item.disabled" @click.prevent="removeDomainThree(index)" icon="el-icon-remove-outline" circle></el-button>
          </div>
        </div>
        <!-- 个体防护措施four -->
        <div class="border">
          <span class="content">个体防护措施</span>
          <div 
            v-for="(item, index) in dateForm.domainsFour"
            :key="'4'+index"
            :label="index"
            class="form">
            <el-form-item>
              <span class="index">{{index+1}}.</span>
              <el-input v-model="item.value" class="input"></el-input>
            </el-form-item>
              <el-button class="add"  @click.prevent="addFour(index)" icon="el-icon-circle-plus-outline" circle></el-button>
              <el-button class="delete" :disabled="item.disabled" @click.prevent="removeDomainFour(index)" icon="el-icon-remove-outline" circle></el-button>
          </div>
        </div>
        <!-- 应急处置措施five -->
        <div class="border">
          <span class="content">应急处置措施</span>
          <div 
            v-for="(item, index) in dateForm.domainsFive"
            :key="'5'+index"
            :label="index"
            class="form">
            <el-form-item>
              <span class="index">{{index+1}}.</span>
              <el-input v-model="item.value" class="input"></el-input>
            </el-form-item>
              <el-button class="add"  @click.prevent="addFive(index)" icon="el-icon-circle-plus-outline" circle></el-button>
              <el-button class="delete" :disabled="item.disabled" @click.prevent="removeDomainFive(index)" icon="el-icon-remove-outline" circle></el-button>
          </div>
        </div>
        <!-- 现有评价阶段 -->
        <el-card class="box-card" style="margin-top:20px">
          <div slot="header" class="clearfix">
            <span>现有措施评价</span>
          </div>
          <!-- radio在这两个组件里面 -->
          <LS ref="ls" v-if="row.pjff == 'LS'" @point="pointType"></LS>
          <LEC ref="lec" v-if="row.pjff == 'LEC'" @point="pointType"></LEC>
          <div class="label">
            <el-form-item class="formItem">
              <p align="center">风险值:</p>
              <el-input v-model="dateForm.fxz" disabled></el-input>
            </el-form-item>
            <el-form-item class="formItem">
              <p align="center">风险级别:</p>
              <el-input v-model="dateForm.level" disabled></el-input>
            </el-form-item>
            <el-form-item class="formItem">
              <p align="center">风险色:</p>
              <el-input v-model="dateForm.color" disabled></el-input>
            </el-form-item>
            <el-form-item class="formItem">
              <p align="center">管控层级:</p>
              <el-input v-model="dateForm.fxgkcj" disabled></el-input>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="Submit" :disabled="submitDisable">确 定</el-button>
    </div>
</el-dialog>
</template>

<script>
import LS from './children/ls'
import LEC from './children/lec'
import request from '@/utils/request'
import { logout } from '@/api/user'

export default {
  data() {
    return {
      dialogFormVisible: false,
      submitDisable:true,
      row:{},
      dateForm: { // 域
        fxz:'', // 风险值
        level:'', // 风险级别
        color:'', // 风险色
        fxgkcj:'', // 管控层级
        domainsOne: [{
          value: '',
          disabled:true,
        }],
        domainsTwo: [{
          value: '',
          disabled:true,
        }],
        domainsThree: [{
          value: '',
          disabled:true,
        }],
        domainsFour: [{
          value: '',
          disabled:true,
        }],
        domainsFive: [{
          value: '',
          disabled:true,
        }],
      }
    }
  },
  components:{LS,LEC},
  methods: {
    Submit() {
      if(this.dateForm.level == '重大风险') {
          this.dateForm.level = 1
        } else if(this.dateForm.level == '较大风险') {
          this.dateForm.level = 2
        } else if(this.dateForm.level == '一般风险') {
          this.dateForm.level = 3
        } else {
          this.dateForm.level = 4
        }
      // 风险等级做处理
      let query = {
        Id:this.row.id,
        gcjscs:JSON.stringify(this.dateForm.domainsOne), 
        glcs:JSON.stringify(this.dateForm.domainsTwo),
        pxjycs:JSON.stringify(this.dateForm.domainsThree),
        gtfhcs:JSON.stringify(this.dateForm.domainsFour),
        yjczcs:JSON.stringify(this.dateForm.domainsFive),
        fxdj:this.dateForm.level,
        fxz:this.dateForm.fxz,
        gkcj:this.dateForm.fxgkcj,
      };
      request({
        url: `/api/System/RiskPlanpointcheck/Actions/TJXX`,
        method: 'get',
        data: query
      }).then(res => {
        this.$message({
          message: res.msg,
          type: 'success',
          duration: 1000,
          onClose: () =>{
            this.dialogFormVisible = false
            this.$emit('refresh', true);
            // this.$parent.refresh(isrRefresh)
          }
        })
      })
    },
    pointType(sum) {
      // let num = Math.round(sum*100)/100
      let num = sum.toFixed(2) // 去小数点后两位
      this.dateForm.fxz = num
      let query = {
        point:num,
        type:this.row.pjff
      };
      request({
        url: `/api/System/RiskPlanpointcheck/Actions/GetRisk`,
        method: 'get',
        data: query
      }).then(res => {
        let arr1 = JSON.parse(res.data);
        this.dateForm.color = arr1[0].color ? arr1[0].color : '';
        this.dateForm.fxgkcj = arr1[0].fxgkcj;
        this.dateForm.level = arr1[0].level;
        
      })
      if(this.dateForm.fxz) {
          this.submitDisable = false
      } else { 
        this.submitDisable = true
      }
    },
    // 数据处理
    dealValue(name){
      this.dateForm[name].forEach(item => {
        if(item.value != '') {
          item.value = undefined
        }
      })
    },
    init(row) {
      this.submitDisable = true
      this.$nextTick(() => {
        setTimeout(() => {
          if(this.row.pjff == 'LS') {
            this.$refs['ls'].initLs()
          } else{
            this.$refs['lec'].initLec()
          }
        },100)
        // 初始化值
        this.dateForm.fxz = ''
        this.dateForm.level = ''
        this.dateForm.color = ''
        this.dateForm.fxgkcj = ''
        this.dealValue('domainsOne')
        this.dealValue('domainsTwo')
        this.dealValue('domainsThree')
        this.dealValue('domainsFour')
        this.dealValue('domainsFive')
      })
      this.row = row
      this.dialogFormVisible = true
    },
    removeDomain(index) {
      this.dateForm.domainsOne.splice(index, 1)
    },
    removeDomainTwo(index) {
      this.dateForm.domainsTwo.splice(index, 1)
    },
    removeDomainThree(index) {
      this.dateForm.domainsThree.splice(index, 1)
    },
    removeDomainFour(index) {
      this.dateForm.domainsFour.splice(index, 1)
    },
    removeDomainFive(index) {
      this.dateForm.domainsFive.splice(index, 1)
    },
    add() {
      this.dateForm.domainsOne.push({
        value:'',
        // disabled:false,
      })
    },
    addTwo() {
      this.dateForm.domainsTwo.push({
        value:'',
        // disabled:false,
      })
    },
    addThree() {
      this.dateForm.domainsThree.push({
        value:'',
        // disabled:false,
      })
    },
    addFour() {
      this.dateForm.domainsFour.push({
        value:'',
        // disabled:false,
      })
    },
    addFive() {
      this.dateForm.domainsFive.push({
        value:'',
        // disabled:false,
      })
    },
  }
}
</script>

<style lang="scss" scope>
  .dialog {
    .box-card {
      .label {
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
        .formItem {
          margin-left: -50px;
        }
      }
      .table {
        border-collapse:collapse;
        width: 650px;
        margin: 0 10px 10px 10px;
        // border-color:red;
          tr:nth-child(1) {
            height: 28px;
            background-color: rgb(245, 245, 245);
            // td:nth-child(1), td:nth-child(2) {
            //   width: 48%;
            // }
          }
      }
      .border {
        border: 1px solid rgb(211, 211, 211);
        position: relative;
        margin-top: 20px;
        .content {
          position: relative;
          top: -15px;
          left: 15px;
          background-color: rgb(255, 255, 255);
          padding: 0 20px;
        }
        .form {
          position: relative;
          width: 700px;
          height: 45px;
          .index {
            position: absolute;
            left: -35px;
          }
          .delete {
            position: absolute;
            top: 0px;
            right: 20px;
          }
          .add {
            position: absolute;
            top: 0px;
            right: 60px;
          }
          .input {
            position: absolute;
            width: 500px;
            text-align:center;
            // line-height: 80px;
          }
        }
      }
    }
  }
</style>